<template>
  <el-card
    class="box-card"
    style="background-color: #fff; margin-left: 1%; width: 98%"
  >
    <p style="border-bottom: 1px solid #ebeef5; padding-bottom: 20px">
      商品添加
    </p>
    <!-- 名称 -->
    <p style="display: flex; margin-top: 20px">
      <span style="margin-right: 14px; line-height: 36px">商品名称</span>
      <el-input
        style="width: 300px"
        placeholder="请输入内容"
        v-model="name"
        clearable
      ></el-input>
    </p>

    <!-- 分类-->
    <p style="display: flex; margin-top: 20px">
      <span style="margin-right: 14px; line-height: 36px">商品分类</span>
      <el-select
        style="width: 200px"
        v-model="selectvalue"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.cateName"
          :label="item.cateName"
          :value="item.cateName"
        >
        </el-option>
      </el-select>
    </p>

    <!-- 价格 -->
    <p style="display: flex; margin-top: 20px">
      <span style="margin-right: 14px; line-height: 36px">商品价格</span>
      <el-input-number
        v-model="price"
        :min="0"
        :max="1000"
        label="描述文字"
      ></el-input-number>
    </p>

    <!-- 上传图片 -->
    <p style="display: flex; margin-top: 20px">
      <span style="margin-right: 14px; line-height: 36px">商品图片</span>
      <el-upload
        action="http://127.0.0.1:5000/goods/goods_img_upload"
        class="avatar-uploader"
        :show-file-list="false"
        :on-success="imgUploadSuccess"
      >
        <img v-if="callbackImg" :src="callbackImg" class="avatar" />
        <i v-else class="icon el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </p>

    <!-- 描述 -->
    <p style="display: flex; margin-top: 20px">
      <span style="margin-right: 14px; line-height: 36px">商品描述</span>
      <el-input
        style="width: 300px"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="desc"
      >
      </el-input>
    </p>

    <el-button
      @click="addGoods"
      style="margin-top: 20px; margin-left: 76px"
      type="primary"
      >添加商品</el-button
    >
  </el-card>
</template>

<script>
import { categories, add } from "@/apis/goods";
export default {
  data() {
    return {
      name: "",
      price: 0,
      callbackImg: "", //回填到el-uoload里的
      newImg: "", //图片新名字
      desc: "",
      selectvalue: "", //分类value
      options: [], //分类下拉
    };
  },
  created() {
    //查询分类
    categories().then((res) => {
      // console.log(res.data.categories);
      this.options = res.data.categories;
    });
  },

  methods: {
    //图片上传
    imgUploadSuccess(res, file) {
      this.newImg = res.imgUrl; //新名字
      this.callbackImg = URL.createObjectURL(file.raw);
    },

    //添加商品
    addGoods() {
      add({
        name: this.name,
        category: this.selectvalue,
        price: this.price,
        imgUrl: this.newImg,
        goodsDesc: this.desc,
      }).then((res) => {
        // console.log(res);
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>